<template>
  <view class="goodSkills">
    <view class="goodSkillsShow">最多填写三个，关键词将提高你的通过率</view>
    <view class="goodSkillsShow1">
      <view class="goodSkillsShowHave">已有</view>
      <view class="goodSkillsShowtag">
        <view
          class="uTag"
          v-for="(i, index) in listVal"
          :key="i"
          @click="tagClick(index)"
        >
          <u-tag
            :text="i"
            mode="dark"
            closeable
            :close-color="settings.theme"
            :color="settings.theme"
            bg-color="#EAF0FF"
            @close="tagClick"
          />
        </view>
      </view>
    </view>
    <view>
      <view class="zdyBox">
        <u-input
          style="width:80%"
          v-model="value"
          placeholder="请输入技能标签，不超过六个字"
        />
        <view class="zdyNum">{{ valueLegth }}/6</view>
      </view>
      <view class="zdyButton" @click="addTab">
        +
        <text>自定义</text>
      </view>
    </view>
    <view class="tagSave">
      <button @click="tagSaveShow" class="tagSaveShow">保存</button>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      listVal: [],
      valueLegth: 0,
      addTabShow: false,
      value: ""
    };
  },
  computed: {
    ...mapState(['settings'])
  },
  watch: {
    value(val) {
      this.valueLegth = val.length;
      if (this.valueLegth > 6) {
        uni.showToast({
          title: "文字不能超过六个字",
          icon: "none",
          duration: 1500
        });
      }
    }
  },
  onLoad(e) {
    console.log(e);
    this.listVal = e.skill ? e.skill.split(",") : [];
  },
  methods: {
    addTab() {
      const that = this;
      if (that.valueLegth === 0) {
        uni.showToast({
          title: "文字不能为空",
          icon: "none",
          duration: 1500
        });
      } else if (that.valueLegth > 6) {
        uni.showToast({
          title: "文字不能超过六个字",
          icon: "none",
          duration: 1500
        });
      } else if (this.listVal.length > 2) {
        uni.showToast({
          title: "标签最多输入三个",
          icon: "none",
          duration: 1500
        });
      } else {
        that.listVal.push(that.value);
        setTimeout(function() {
          that.value = "";
        }, 500);
      }
    },
    tagClick(index) {
      this.listVal.splice(index, 1);
    },
    tagSaveShow() {
      if (this.listVal.length === 0) {
        uni.showToast({
          title: "请输入标签，点击自定义保存",
          icon: "none",
          duration: 1500
        });
        return;
      }
      const data = {
        skill: this.listVal + ""
      };
      /* global getCurrentPages:false */
      var pages = getCurrentPages();
      var prevPage = pages[pages.length - 2];
      prevPage.setData({
        form: { ...data }
      });
      uni.navigateBack({ delta: 1 });
    }
  }
};
</script>
<style lang="scss">
@import "../../../styles/styles.scss";
@import "./index.scss";
</style>
